@import '../edit-detail/edit-detail';
area-picker {
  .container {
    header {
      position: relative;
      height: pxTorem(88);
      line-height: pxTorem(88);
      text-align: center;
      background-color: #fff;
      .back {
        display: inline-block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: pxTorem(30);
        margin: auto;
        @include icon(21, 40, '/assets/icon/back_btn.png')
      }
    }
  }
  .areaPicker {
    position: relative;
    z-index: 10;
    width: 100%;
    text-align: center;
    color: color($h5, c2);
    .control {
      display: flex;
      justify-content: space-between;
      .close {
        padding-left: pxTorem(20px);
      }
      .sure {
        padding-right: pxTorem(20px);
      }
    }
    .top {
        padding-top: pxTorem(15);
    }
    .nav {
       display: flex;
      height: pxTorem(85);
      padding-left: pxTorem(60);
      line-height: pxTorem(85);
             border-bottom: 1px solid #f0f0f0;
      background-color: #fff;
      @include font-dpr(28px);
      position: relative;
      text-align: left;
      span {
        display: inline-block;
        margin-right: pxTorem(60);
      }
      .active {
        position: relative;
        color: color($h5, c1);
        &::after {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          display: inline-block;
          width: pxTorem(14);
          height: 2px;
          margin: auto;
          border-radius: 2px;
          background-color: color($h5, c1);
        }
      }
      i {
        background: url('../../../../../assets/icon/Add.png') no-repeat center center;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        position: absolute;
        top: pxTorem(42px);
        right: pxTorem(50px);
        width: pxTorem(42px);
        height: pxTorem(42px);
      }
    }
    .wrap {
      -webkit-overflow-scrolling: touch;
      background-color: #fff;
      position: relative;
      overflow-x: hidden;
      .pick {
        position: absolute;
        left: 0;
        top: 0;
        transition: left .3s linear;
        .page {
          height: 100%;
          float: left;
          width: 50%;
          overflow-y: scroll;
          p {
            display: flex;
            align-items: center;
            padding: pxTorem(30px) pxTorem(50px) pxTorem(30px) pxTorem(30px);
            @include font-dpr(28px);
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
            &:last-of-type {
              border-bottom: none;
            }
            &.has-choose {
              position: relative;
              color: color($h5, c1);
              &:after {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                margin: auto;
                display: inline-block;
                right: pxTorem(50);
                @include icon(24,
                18,
                '/assets/icon/gou.png')
              }
            }
          }
        }
      }
    }
  }
}
